import 'package:flutter/material.dart';
import 'package:flutter_markdown/flutter_markdown.dart';
import 'package:get/get.dart';
import 'package:pet_app/base/base_view.dart';
import 'package:pet_app/widget/app_net_image.dart';

import 'logic.dart';

class ArticleDetailPage extends BaseView<ArticleDetailLogic> {
  ArticleDetailPage({Key? key}) : super(key: key);

  @override
  bool? get isHiddenNav => true;

  @override
  Widget buildContent() {
    final logic = Get.find<ArticleDetailLogic>();

    return GetBuilder<ArticleDetailLogic>(builder: (logic) {
      return SafeArea(
          child: logic.isLoading
              ? const Center()
              : Stack(
                  children: [
                    SingleChildScrollView(
                      child: Column(
                        children: [
                          AppNetImage(imageUrl: logic.article.imageUrl!),
                          Padding(
                            padding: const EdgeInsets.all(12.0),
                            child: Align(
                                alignment: Alignment.centerLeft,
                                child: Text(
                                  logic.article.title!,
                                  style: const TextStyle(
                                      fontSize: 22,
                                      fontWeight: FontWeight.bold),
                                )),
                          ),
                          Padding(
                            padding: const EdgeInsets.only(
                                top: 4.0, left: 12, right: 12, bottom: 40),
                            child: MarkdownBody(
                              data: logic.article.content!,
                              styleSheet: MarkdownStyleSheet(
                                  p: const TextStyle(height: 1.8)),
                            ),
                          ),
                          // Text(logic.article.content!)
                        ],
                      ),
                    ),
                    Positioned(
                      bottom: 0,
                      left: 0,
                      right: 0,
                      child: Center(
                        child: Container(
                          height: 38,
                          width: double.infinity,
                          decoration: const BoxDecoration(color: Colors.black),
                          child: GestureDetector(
                            onTap: () => Get.back(closeOverlays: true),
                            child: const Icon(
                              Icons.close_rounded,
                              color: Colors.white,
                              size: 20,
                            ),
                          ),
                        ),
                      ),
                    )
                  ],
                ));
    });
  }
}
